<template>
  <div class="tool-bar">
    <img :src="avatar" class="avatar" alt="">
    <div class="operation-icon-container">
      <OperationIcon :icon-name="item.iconName" :icon-text="item.iconText" v-for="item in operationList"></OperationIcon>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { Ref } from "vue";
import OperationIcon from './OperationIcon.vue'

const avatar:Ref<string> = ref('https://thirdwx.qlogo.cn/mmopen/vi_32/43ks1tyJr0UcswOxvFelJ4mLeP66N01H8ZmwUoSIgn0ZeKV0fVIHtkZZKib93s7N91HiaWuj0kYkwickvaDqJTxlw/132');
const operationList:operationIconType[] = [
  {
    iconName:'icon-bilibili',
    iconText:'bilibili'
  },
  {
    iconName:'icon-github',
    iconText:'前后端源码'
  }
];

</script>

<style scoped lang="less">
.tool-bar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 80px;
  height: 100%;
  padding: 20px 0;
  .operation-icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

</style>
